Drawer（抽屉面板）和 Command Menu（命令菜单）是 DevTools 中被严重低估的两大效率利器。它们不常出现在主面板中，但提供了从动画调试到传感器模拟、从代码覆盖率到性能监控等一系列关键功能。
Drawer 是 DevTools 底部的隐藏面板区域。它独立于主面板，可以在任何主面板上叠加使用。
Esc 键Esc 键⋮ 菜单，或使用 Command Menu按 Cmd + Shift + P (Mac) / Ctrl + Shift + P (Windows/Linux)，你会看到一个类似 VS Code 命令面板的搜索框。
基本操作：
| 命令类别 | 示例 | 功能 |
|---|---|---|
| 面板切换 | Show Console | 打开任意面板 |
| 主题切换 | Switch to dark theme | 切换深色/浅色主题 |
| 布局切换 | Dock to bottom | 切换停靠位置 |
| 截图 | Capture full size screenshot | 全页/节点/视口截图 |
高级操作：
| 命令 | 功能 |
|---|---|
Disable JavaScript | 一键禁用 JS，测试无脚本环境 |
Go offline / Go online | 快速切换离线/在线状态 |
Clear browser cache | 清除浏览器缓存 |
Clear browser cookies | 清除当前站点 Cookies |
Emulate CSS print media type | 模拟打印样式 |
Emulate a focused page | 模拟页面获得焦点 |
Emulate CSS prefers-color-scheme: dark | 模拟深色模式偏好 |
Emulate CSS prefers-reduced-motion | 模拟减少动画偏好 |
Run snippet | 运行已保存的 Snippets |
许多 Drawer 面板没有默认按钮，只能通过 Command Menu 打开：
Show Coverage → 代码覆盖率分析Show Changes → 修改追踪Show Animations → 动画调试Show Rendering → 渲染调试选项Show Performance monitor → 实时性能监控Show Network request blocking → 请求拦截管理Show Sensors → 传感器模拟Show CSS Overview → CSS 全局分析Show Issues → 页面问题检测Animations 面板可以：
实战：调试复杂的 CSS 动画序列时，将动画速度调慢至 25%，可以逐帧观察过渡效果，精确定位动画不流畅的位置。
每当你在 Elements 面板中修改 CSS 或在 Sources 面板中修改代码，Changes 面板会以 diff 对比的形式记录所有变更。
关键操作：
Copy 将变更复制为代码Revert 撤销变更💡 工作流提示：在 Elements 面板中完成 CSS 调试后，打开 Changes 面板，将所有修改一键复制到源码中。
Coverage 面板分析页面加载的 CSS 和 JS 文件中，哪些代码被执行了，哪些是"死代码"。
使用方式：
Start instrumenting coverage and reload pageStop instrumenting coverage报告解读：
| 颜色 | 含义 |
|---|---|
| 🟦 蓝色 | 已执行的代码 |
| 🟥 红色 | 未执行的代码（Dead Code） |
应用场景：
独立的网络条件控制面板，不受 Network 面板关闭的影响：
实时性能仪表盘，显示：
| 指标 | 含义 |
|---|---|
| CPU usage | 当前 CPU 使用率 |
| JS heap size | JS 堆内存大小 |
| DOM Nodes | 当前 DOM 节点数量 |
| JS event listeners | 事件监听器数量 |
| Documents | 文档数量（含 iframe） |
| Document Frames | 文档帧数 |
| Layouts / sec | 每秒布局次数 |
| Style recalcs / sec | 每秒样式重计算次数 |
💡 在开发过程中保持 Performance Monitor 打开，可以实时感知页面的性能变化。当 DOM Nodes 或 JS event listeners 异常增长时，立即发现潜在的内存泄漏。
轻量级代码编辑器，适合在不离开当前面板的情况下快速查看和编辑代码：
最重要的渲染问题诊断工具集：
| 选项 | 功能 | 使用场景 |
|---|---|---|
| Paint flashing | 绿色高亮所有重绘区域 | 发现不必要的重绘 |
| Layout Shift Regions | 蓝色高亮布局偏移 | 定位 CLS 问题 |
| Layer borders | 橙色边框标记合成层 | 检查合成层策略 |
| FPS meter | 实时帧率显示 | 性能感知 |
| Scrolling performance issues | 高亮滚动性能问题 | 滚动优化 |
| Core Web Vitals | 🆕 实时显示 LCP/INP/CLS | 实时指标监控 |
| Frame Rendering Stats | 🆕 帧渲染统计 | 深入帧分析 |
统一管理被拦截的网络请求：
这与 Network 面板中右键 → Block request URL 是同一个功能，但这里可以集中管理。
模拟设备传感器数据：
主面板: Elements（调试 CSS）
Drawer: Changes（追踪所有修改）在 Elements 中随意调整样式，Changes 面板自动记录 diff。调试完成后，从 Changes 面板复制所有改动到代码文件。
主面板: Network / Sources（正常开发）
Drawer: Performance Monitor（实时监控）在开发过程中保持 Performance Monitor 打开，实时监控 JS heap size 和 DOM Nodes 数量。异常增长立即发现。
主面板: Network（分析请求）
Drawer: Network conditions（随时切换网络环境）在 Network 面板分析请求的同时，通过 Drawer 中的 Network conditions 快速切换网络节流设置，无需关闭 Network 面板。